<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>158数组的解构赋值</title>
</head>

<body>
  <h1>158数组的解构赋值</h1>
  <script>
    /*
      一、数组的解构赋值
        1 数组的解构是将数组内的元素批量赋值给一系列变量的简洁语法

        2 数组解构赋值的一些特殊情况
          变量多，单元值少。
          变量少，单元值多。
          剩余参数解决：变量少，单元值多。
          防止有undefined传递单元值的情况，解构数组时可以设置默认值。
          按需导入，忽略某些单元值。
          多维数组解构。
    */
    let arr = [1, 2, 3]
    let [min, average, max] = arr
    console.log(min, average, max)

    // 案例：不借助中间变量交换两个变量的值
    let a = 1
    let b = 2;
    [b, a] = [a, b]
    console.log(a, b)

    // 练习
    let logo = ['海尔', '联想', '小米', '方正']
    let [haier, lianxiang, xiaomi, fangzheng] = logo
    console.log(haier, lianxiang, xiaomi, fangzheng)

    function getValue() {
      return [100, 60]
    }
    let [maxValue, minVlaue] = getValue()
    console.log(maxValue, minVlaue)

    // 变量多，单元值少。
    // let demo = [1, 2, 3]
    // let [j, k, l, m] = demo
    // console.log(j, k, l, m) // 变量m是undefined

    // 变量少，单元值多。
    // let demo = [1, 2, 3]
    // let [j, k] = demo
    // console.log(j, k) // 单元值3没有变量接收，丢失

    // 剩余参数解决：变量少，单元值多。
    // let demo = [1, 2, 3, 4, 5]
    // let [j, k, ...agrs] = demo
    // console.log(j, k, agrs) // 除了函数，数组解构有也能用到剩余参数运算符

    // 防止有undefined传递单元值的情况，解构数组时可以设置默认值。
    // let demo = []
    // let [j = 0, k = 0] = demo
    // console.log(j, k) // 变量j, k的值为默认值0

    // 按需导入，忽略某些单元值。
    // let demo = [1, 2, 3, 4, 5]
    // let [j, k, , m, n] = demo
    // console.log(j, k, m, n) // 单元值3丢失

    // 多维数组解构。
    let demo = [1, 2, 3, [4, 5, 6]]
    let [j, k, l, m] = demo
    console.log(j, k, l, m)
  </script>
</body>

</html>